<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js Iframe</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
  <script>
    let scene, camera, renderer, controls;
    let animationFrameId;

    // 初始化 Three.js 场景
    function initThreeJS() {
      // 场景
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      // 渲染器
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 控制器
      controls = new THREE.OrbitControls(camera, renderer.domElement);

      // 添加立方体
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // 渲染循环
      function animate() {
        animationFrameId = requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
      }
      animate();
    }

    // 销毁 Three.js 资源
    function disposeThreeJS() {
      // 停止动画帧
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
        animationFrameId = null;
      }

      // 遍历场景中的所有对象
      scene.traverse((object) => {
        if (object.isMesh) {
          object.geometry.dispose();
          if (object.material) {
            object.material.dispose();
          }
          scene.remove(object);
        }

        if (object instanceof THREE.CSS3DObject) {
          if (object.element && object.element.parentNode) {
            object.element.parentNode.removeChild(object.element);
          }
          scene.remove(object);
        }
      });

      // 清空渲染器
      renderer.dispose();

      // 移除 DOM
      if (renderer.domElement) {
        renderer.domElement.remove();
      }

      // 清空变量
      scene = null;
      camera = null;
      renderer = null;
      controls = null;
    }

    // 接收来自父页面的消息
    window.addEventListener("message", (event) => {
      if (event.data.command === "start") {
        if (!renderer) {
          initThreeJS();
        }
      } else if (event.data.command === "stop") {
        disposeThreeJS();
      }
    });

    {
      /* 
      // 销毁 GUI 的方法
      function destroyGUI() {
        // 1. 移除 GUI 的 DOM 元素
        const guiElement = gui.domElement;
        if (guiElement && guiElement.parentNode) {
          guiElement.parentNode.removeChild(guiElement);
        }

        // 2. 清理 GUI 的控制项 好像是undefined
        // gui.__controllers.forEach(controller => controller.remove()); // 删除控制项

        // 3. 清空其他属性
        gui.children = [];
        gui.folders = [];
        gui.controllers = [];
        gui.domElement = null;
      }
      */
    }

    {
      /* 
      // 假设 controls 是 OrbitControls 的实例
function destroyControls() {
  if (controls) {
    // 解除绑定的事件监听器
    controls.dispose();
    // 清理 controls 对象，释放引用
    controls = null;
  }
}

      */
    }
  </script>
</body>

</html>